<template>
    <div class="delegate-wrap">
        <el-table
            :data="tableData"
            class="my-table"
            row-class-name="table-row">
            <el-table-column
                label="委托">
                <template slot-scope="scope">
                    <span class="icon empty"
                    :class='{"more": scope.row.long}'>{{scope.row.long ? '多':'空'}}
                    </span> {{getCurPaireObj.label}}  <span class="blue">{{scope.row.leverage}}X</span>
                </template>
            </el-table-column>
            <el-table-column
                prop=""
                label="数量">
                <template class="" slot-scope="scope">{{scope.row.size}}</template>
            </el-table-column>
            <el-table-column
                prop=""
                label="委托方向">
                <template class="" slot-scope="scope">
                    {{scope.row.open ?  '开仓' : '平仓'}}
                </template>
            </el-table-column>
            <el-table-column
                prop=""
                label="委托类型">
                <template class="" slot-scope="scope">
                    <!-- {{scope.row.long ? scope.row.open ? '' : '' : scope.row.open ? '' : ''}} -->
                </template>
            </el-table-column>
            <el-table-column
                prop=""
                label="触发价格">
                <template slot-scope="scope">
                    <span class="green">{{scope.row.openPrice | fck(-8, 2)}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop=""
                label="止盈/止损">
                <template slot-scope="scope">
                    <div class="" >—/—
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop=""
                label="委托时间">
                <template slot-scope="scope">
                    --
                </template>
            </el-table-column>
            <el-table-column
                prop=""
                class=""
                label="">
                <template slot="header">
                    <div class="pointer yellow link" @click="cancelAll">一键取消</div>
                </template>
                <template slot-scope="scope">
                    <div class="input">
                        <button class="btn pc-btn cancel-btn" @click="handelCancel(scope.row)">取消</button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import ToastUtils from '@/utils/toastUtils'

export default {
    name: 'Home',
    components: {
    },
    data() {
        return {
            tableData: []
        }
    },
    computed: {
      ...mapGetters([
          'addr',
          'board',
          'account'
      ])
    },
    watch: {
        'account': function(newVal) {
            console.log('delegate.vue==>>watch.account, newVal: %o', newVal)
            this.tableData = []
            if(newVal.longClosePending.length){
                newVal.longClosePending.forEach((pending, index) => {
                    const val = Object.assign({}, pending)
                    val.long = true
                    val.open = false
                    val._side = 0
                    val._index = index
                    this.tableData.push(val)
                })
            }
            if(newVal.longOpenPending.length){
                newVal.longOpenPending.forEach((pending, index) => {
                    const val = Object.assign({}, pending)
                    val.long = true
                    val.open = true
                    val._side = 0
                    val._index = index
                    this.tableData.push(val)
                })
            }
            if(newVal.shortClosePending.length){
                newVal.longClosePending.forEach((pending, index) => {
                    const val = Object.assign({}, pending)
                    val.long = false
                    val.open = false
                    val._side = 1
                    val._index = index
                    this.tableData.push(val)
                })
            }
            if(newVal.shortOpenPending.length){
                newVal.longClosePending.forEach((pending, index) => {
                    const val = Object.assign({}, pending)
                    val.long = false
                    val.open = true
                    val._side = 1
                    val._index = index
                    this.tableData.push(val)
                })
            }
        }
    },
    created() {
        for (let index = 0; index < 3; index++) {
            this.tableData.push({
                key: 1,
                more: index % 2===1
            })
        }
    },
    mounted() {

    },
    methods:{
        cancelAll(){
            ToastUtils.showMsg('此功能尚未开放')
        },
        handelCancel(position){
            // ToastUtils.showMsg('此功能尚未开放')
            log('delegate/index.vue.handelCancel', {position})
            let {_side, _index} = position
            if(position.open) {
                window.cancelOpenPosition(_side, _index)
                    .then(res => {
                        ToastUtils.showMsg('取消操作已上链')
                        log('delegate/index.vue.handelCancel.cancelOpenPosition', {res})
                    })
                    .catch(err => {
                        log('delegate/index.vue.handelCancel.cancelOpenPosition', {err})
                        ToastUtils.showMsg('取消操作失败')
                    })
            }else{
                window.cancelClosePosition(_side, _index)
                    .then(res => {
                        ToastUtils.showMsg('取消操作已上链')
                        log('delegate/index.vue.handelCancel.cancelClosePosition', {res})
                    })
                    .catch(err => {
                        log('delegate/index.vue.handelCancel.cancelClosePosition', {err})
                        ToastUtils.showMsg('取消操作失败')
                    })
            }
        },

    }
}
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
